.nsb_chatview_msg_root {
  --head_size            : 34px; // 頭像大小
  --head_margin_start    : 22px;
  --head_margin_end      : 13px;
  --head_letter_font_size: 18px;
  --head_bg_color        : black; // 发送者头像背景色
  --head_border_radius   : 3px;

  --sys_msg_color            : #9e9e9e; // 系统消息内容色
  --sender_name_color        : #9e9e9e; // 发送者名称内容色
  --sender_name_font_size    : 12px;
  --sender_name_min_height   : 5px;
  --sender_name_margin_bottom: 5px;

  --bubble_border_radius: 3px;

  // 我的
  --my_chat_bubble_bg_color    : #95EC69; // 气泡颜色
  --my_chat_bubble_color       : #222222; // 消息气泡内容颜色
  --my_chat_bubble_shadow_color: #00000022; // 消息气泡外阴影颜色

  // 其他人
  --od_chat_bubble_bg_color    : white; // 消息气泡颜色
  --od_chat_bubble_color       : #222222; // 消息气泡内容颜色
  --od_chat_bubble_shadow_color: #00000022; // 消息气泡外阴影颜色

  --bubble_padding_top   : 8px;
  --bubble_padding_bottom: 8px;
  --bubble_padding_right : 10px;
  --bubble_padding_left  : 10px;

  // 文件气泡
  --file_bubble_bg_color   : white;
  --file_name_color        : #222222;
  --file_size_color        : gray;
  --file_icon_size         : 48px;
  --msg_file_name_font_size: 16px;
  --msg_file_size_font_size: 12px;


  display       : flex;
  flex-direction: column;
  user-select   : none;
  position      : relative;
  padding-bottom: 5px;
  opacity       : 0;

  .floating_button {
    transition      : all 400ms;
    transform-origin: 50% 50%;
    outline         : none;
    border          : none;
    box-shadow      : 2px 2px 5px transparent;

    &:disabled {
      transform : none;
      box-shadow: 2px 2px 10px transparent;
    }

    &:hover {
      box-shadow: 2px 2px 10px #00000033;
    }

    &:active {
      box-shadow: 2px 2px 10px transparent;
      box-shadow: none;
      transition: all 255ms;
    }
  }

  .nsb_chatview_msg_date {
    align-self    : center;
    color         : var(--sys_msg_color);
    font-size     : 12px;
    padding-top   : 12px;
    padding-bottom: 22px;
  }

  .nsb_chatview_msg_sender_name {
    font-size    : var(--sender_name_font_size);
    color        : var(--sender_name_color);
    min-height   : var(--sender_name_min_height);
    margin-bottom: var(--sender_name_margin_bottom);
  }

  .nsb_chatview_my_msg_sender_name {
    @extend .nsb_chatview_msg_sender_name;
    align-self: flex-end;
  }

  .nsb_chatview_od_msg_sender_name {
    @extend .nsb_chatview_msg_sender_name;
    align-self: flex-start;
  }

  .nsb_chatview_msg_system_body {
    align-self: center;
    color     : var(--sys_msg_color);
    font-size : 12px;
  }

  .nsb_chatview_msg_body_zone {
    display : flex;
    position: relative;

    .nsb_chatview_msg_sender_head {
      @extend .floating_button;
      width        : var(--head_size);
      height       : var(--head_size);
      margin       : 5px;
      background   : var(--head_bg_color);
      border-radius: var(--head_border_radius);
      align-self   : flex-start;
      outline      : none;
      border       : none;
      padding      : 0px 0px 0px 0px;
      overflow     : hidden;

      &>div:first-child {
        filter         : invert(100%);
        font-size      : var(--head_letter_font_size);
        color          : var(--head_bg_color);
        overflow       : hidden;
        word-break     : keep-all;
        width          : var(--head_size);
        height         : var(--head_size);
        display        : flex;
        align-items    : center;
        justify-content: center;
        font-weight    : bolder;
      }

      img {
        border-radius: var(--head_border_radius);
        width        : var(--head_size);
        height       : var(--head_size);
        object-fit   : cover;
        overflow     : hidden;
        outline      : none;
        border       : none;
        display      : block;
      }

    }

    .nsb_chatview_my_msg_sender_head {
      @extend .nsb_chatview_msg_sender_head;
      margin-left : var(--head_margin_end);
      margin-right: var(--head_margin_start);
    }

    .nsb_chatview_od_msg_sender_head {
      @extend .nsb_chatview_msg_sender_head;
      margin-left : var(--head_margin_start);
      margin-right: var(--head_margin_end);
    }

    .nsb_chatview_msg_bubble_zone {
      position      : relative;
      display       : flex;
      flex-direction: column;
      max-width     : 60%;

      .nsb_chatview_msg_bubble {
        position         : relative;
        box-shadow       : 0px 0px 3px #00000022;
        padding-top      : var(--bubble_padding_top);
        padding-bottom   : var(--bubble_padding_bottom);
        padding-right    : var(--bubble_padding_right);
        padding-left     : var(--bubble_padding_left);
        border-radius    : var(--bubble_border_radius);
        user-select      : text;
        // overflow      : hidden;
        word-break       : break-all;
        z-index          : 1;
      }

      --tip_qube_len:8px;

      // 气泡尖尖
      .bubble_tip {
        content         : '';
        position        : absolute;
        width           : var(--tip_qube_len);
        height          : var(--tip_qube_len);
        transform       : rotate(45deg);
        transform-origin: 50% 50%;
        z-index         : 0;
        display         : block;
        top             : 13px;
      }

      .od_bubble_tip::after {
        @extend .bubble_tip;
        left            : calc(var(--tip_qube_len) * -0.60);
        border          : 1px solid #00000018;
        border-top      : none;
        border-right    : none;
        background-color: var(--od_chat_bubble_bg_color);
      }

      .my_bubble_tip::after {
        @extend .bubble_tip;
        right           : calc(var(--tip_qube_len) * -0.60);
        border          : 1px solid #00000010;
        border-bottom   : none;
        border-left     : none;
        background-color: var(--my_chat_bubble_bg_color);
      }

      .my_img_bubble_tip::after {
        @extend .bubble_tip;
        right           : calc(var(--tip_qube_len) * -0.60);
        border          : 1px solid #00000010;
        border-bottom   : none;
        border-left     : none;
        background-color: var(--od_chat_bubble_bg_color);
      }

      .nsb_chatview_my_msg_bubble {
        @extend .nsb_chatview_msg_bubble;
        @extend .my_bubble_tip;
        align-self: flex-end;
        box-shadow: 0px 0px 3px var(--my_chat_bubble_shadow_color);
      }

      .nsb_chatview_od_msg_bubble {
        @extend .nsb_chatview_msg_bubble;
        @extend .od_bubble_tip;
        align-self: flex-start;
        box-shadow: 0px 0px 3px var(--od_chat_bubble_shadow_color);
      }

      .nsb_chatview_my_msg_text_bubble {
        @extend .nsb_chatview_my_msg_bubble;
        background-color: var(--my_chat_bubble_bg_color);
        color           : var(--my_chat_bubble_color);
        white-space     : pre-line;
      }

      .nsb_chatview_od_msg_text_bubble {
        @extend .nsb_chatview_od_msg_bubble;
        background-color: var(--od_chat_bubble_bg_color);
        color           : var(--od_chat_bubble_color);
        white-space     : pre-line;
      }

      .nsb_chatview_img_bubble {
        background: var(--)od_chat_bubble_bg_color;

        &::after {
          content: none;
        }

        max-width : 100%;
        max-height: 250px;
        padding   : 0px;
        overflow  : hidden;

        img {
          object-fit: cover;
          max-width : 100%;
          max-height: 100%;
          overflow  : hidden;
          z-index   : 2;
          position  : relative;
          display   : block;
        }
      }

      .nsb_chatview_my_msg_img_bubble {
        @extend .nsb_chatview_my_msg_bubble;
        @extend .floating_button;
        @extend .nsb_chatview_img_bubble;
      }

      .nsb_chatview_od_msg_img_bubble {
        @extend .nsb_chatview_od_msg_bubble;
        @extend .floating_button;
        @extend .nsb_chatview_img_bubble;
      }

      .nsb_chatview_msg_file_info {
        display       : flex;
        flex-direction: column;
        min-width     : 150px;
        max-width     : 250px;
      }

      .nsb_chatview_msg_file_icon {
        object-fit: cover;
        max-width : var(--file_icon_size);
        max-height: var(--file_icon_size);
        min-width : var(--file_icon_size);
        min-height: var(--file_icon_size);
        overflow  : hidden;
      }


      .nsb_chatview_msg_file_name {
        color    : var(--file_name_color);
        flex     : 1;
        font-size: var(--msg_file_name_font_size);
      }

      .nsb_chatview_msg_file_size {
        color    : var(--file_size_color);
        font-size: var(--msg_file_size_font_size);
      }

      .nsb_chatview_my_msg_file_bubble {
        @extend .nsb_chatview_my_msg_bubble;
        @extend .floating_button;
        background-color: var(--file_bubble_bg_color);
        display         : flex;

        &::after {
          background-color: var(--file_bubble_bg_color);
        }

        .nsb_chatview_my_msg_file_icon {
          @extend .nsb_chatview_msg_file_icon;
        }

        .nsb_chatview_my_msg_file_info {
          @extend .nsb_chatview_msg_file_info;
          margin-right: 5px;

          .nsb_chatview_my_msg_file_name {
            @extend .nsb_chatview_msg_file_name;
            align-self: flex-end;
          }

          .nsb_chatview_my_msg_file_size {
            @extend .nsb_chatview_msg_file_size;
            align-self: flex-start;
          }
        }
      }

      .nsb_chatview_od_msg_file_bubble {
        @extend .nsb_chatview_od_msg_bubble;
        @extend .floating_button;
        background-color: var(--file_bubble_bg_color);
        display         : flex;
        flex-direction  : row;

        .nsb_chatview_od_msg_file_icon {
          @extend .nsb_chatview_msg_file_icon;
        }

        .nsb_chatview_od_msg_file_info {
          @extend .nsb_chatview_msg_file_info;
          margin-left: 5px;

          .nsb_chatview_od_msg_file_name {
            @extend .nsb_chatview_msg_file_name;
            align-self: flex-start;
          }

          .nsb_chatview_od_msg_file_size {
            @extend .nsb_chatview_msg_file_size;
            align-self: flex-end;
          }
        }
      }
    }
  }

  .nsb_chatview_my_msg_body_zone {
    @extend .nsb_chatview_msg_body_zone;
    flex-direction: row-reverse;
  }

  .nsb_chatview_od_msg_body_zone {
    @extend .nsb_chatview_msg_body_zone;
    flex-direction: row;
  }
}

$nsb_chatview_my_msg_body_zone: nsb_chatview_my_msg_body_zone